<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>JIM管理系统</title>
<%@ include file="../../../inc/main-css.jsp"%>
<%@ include file="../../../inc/main-js.jsp"%>
<style type="text/css">
	.table th, .table td { 
	text-align: center;
	vertical-align: middle!important;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#table').bootstrapTable({
			url:'list',
			showColumns:true,
			pagination:true,
			sidePagination:'server',
			pageList:[10, 25, 50, 100],
			onDblClickRow:function(row, $element){
				
			},
		    columns: [
		    {
		        field: 'title',
		        title: '文章标题'
		    }, {
		        field: 'type',
		        title: '文章分类',
		        formatter:function(value,row,index){
		        	return value+" | "+${articleTypeMap}[value];
		        }
		    }, {
		        field: 'description',
		        title: '文章描述'
		    },{
		        field: 'createtime',
		        title: '创建时间'
		    },{
		        title: '操作',
		        formatter:function(value,row,index){
		        	return '<div class="btn-group" role="group">'
		        			+'<button type="button" class="btn btn-default" onclick="edit('+row.id+');">编辑</button>'
		        			+'<button type="button" class="btn btn-default" onclick="deleteRec('+row.id+');">删除</button>'
		        		+'</div>';
		        }
		    }]
		});
		
		edit = function(id){
			window.location.href = "edit?id="+id;
		}
		
		deleteRec = function(id){
			$.ajax({
				url:"delete",
				type:"post",
				dataType:"json",
				data:{"id":id},
				success:function(data){
					if(data){
						alert(data.message);
						$('#table').bootstrapTable('refresh');
					}
				}
			});
		}
		
		search = function(){
			$('#table').bootstrapTable('refresh',{
				query:{
					field:"name",
					fieldVal:$.trim($("#fieldVal").val()),
					type:$("#type").val()
				}
			});
		}
		
	});//--
	
</script>
</head>
<body>
	<div id="wrapper" class="container-fluid">
		<%@ include file="../../../inc/menu.jsp"%>
		<div id="page-wrapper">
			<div class="container-fluid" style="height: 100%">
				
				<form class="form-inline">
					<div class="btn-group" role="group" aria-label="...">
					  <a href="newArticle" type="button" class="btn btn-default" id="newArticle">写新文章</a>
					</div>
					<select class="form-control" id="type">
						<option value="">所有分类
						<c:forEach items="${articleTypeMap }" var="at">
							<option value="${at.key }">${at.key } | ${at.value }</option>
						</c:forEach>
					</select>
					<div class="form-group">
						<label for="fieldVal">文章标题</label>
						<div class="input-group" style="m">
				    	<input type="text" class="form-control" id="fieldVal">
					  	<span class="input-group-addon btn btn-primary" onclick="search();">搜索</span>
					    </div>
					</div>
				</form>
				<table id="table" class="table"></table>
			</div>
			<!-- /.container-fluid -->
		</div>
	</div>
</body>

</html>